<template>
  <view class="detail-container">
    <!-- 入库单信息 -->
    <view class="custom-card">
      <view class="card-title">入库单信息</view>
      <u-form :model="form" ref="uForm">
        <u-form-item label="入库单号" label-width="90">
          <u-input v-model="form.orderNo" disabled placeholder="自动带入" />
        </u-form-item>
        <u-form-item label="供应商" label-width="90">
          <u-input v-model="form.supplierName" disabled placeholder="自动带入" />
        </u-form-item>
        <u-form-item label="入库时间" label-width="90">
          <u-input v-model="form.inboundTime" type="text" disabled placeholder="自动带入" />
        </u-form-item>
      </u-form>
    </view>

    <!-- 仓库选择 -->
    <view class="custom-card">
      <view class="card-title">选择仓库</view>

      <u-picker :show="showWarehousePicker" :columns="[warehouseList.map(w => w.warehouse_name)]"
        @confirm="onWarehouseConfirm" @cancel="showWarehousePicker = false"></u-picker>
      <u-form :model="form" ref="warehouseForm">
        <u-form-item label="仓库" label-width="90" @click="showWarehousePicker = true">
          <u-input v-model="form.warehouseName" placeholder="请选择仓库" readonly />
        </u-form-item>
        <u-form-item label="备注" label-width="90">
          <u-input v-model="form.remark" type="textarea" placeholder="可填写入库说明" />
        </u-form-item>
      </u-form>
    </view>

    <!-- SKU统计与规格 -->
    <view class="custom-card">
      <view class="card-title">统计</view>
      <view class="sku-summary">
        <text>总箱数：{{skuList.reduce((sum, sku) => sum + Number(sku.cartons_num || 0), 0)}}</text>
        <text style="margin-left: 30rpx;">总件数：{{skuList.reduce((sum, sku) => sum + Number(sku.carton_qty || 0), 0)}}</text>
      </view>
      <view class="sku-table">
        <view class="sku-table-header">
          <text class="sku-col sku-name">SKU名称</text>
          <text class="sku-col sku-dim">规格(长*宽*高 CM)</text>
          <text class="sku-col sku-weight">重量(kg)</text>
          <text class="sku-col sku-qty">数量</text>
          <text class="sku-col sku-action"></text>
        </view>
        <view class="sku-table-row" v-for="sku in (form.cartons || [])" :key="sku.id">
          <text class="sku-col sku-name">{{ sku.skuList[0].title }}</text>
          <text class="sku-col sku-dim">{{ sku.box_length }}*{{ sku.box_width }}*{{ sku.box_height }} CM</text>
          <text class="sku-col sku-weight">{{ sku.box_weight }}</text>
          <text class="sku-col sku-qty">{{ sku.carton_qty }}</text>
          <view class="sku-col sku-action">
            <u-button type="primary" size="mini" @click="onShelfClick(sku)">上架</u-button>
          </view>
        </view>
      </view>
      <u-picker :show="showShelfPicker" :columns="[locationList.map(l => l.name)]" @confirm="onShelfLocationConfirm"
        @cancel="showShelfPicker = false"></u-picker>
    </view>

    <!-- 操作按钮 -->
    <view class="bottom-bar">
      <u-button type="primary" @click="onSubmit" text="提交入库信息" style="margin-bottom: 20rpx;" />
      <u-button type="success" @click="onGoScan" text="扫码盘点" />
    </view>
  </view>
</template>

<script>
import api from '../../api'

export default {
  data() {
    return {
      form: {
        orderNo: '',
        supplierName: '',
        inboundTime: '',
        warehouseId: '',
        warehouseName: '',
        remark: ''
      },
      warehouseList: [],
      showWarehousePicker: false,
      showShelfPicker: false,
      shelfSku: null,
      locationList: [
        { id: 'L1', name: 'A区-01' },
        { id: 'L2', name: 'A区-02' },
        { id: 'L3', name: 'B区-01' }
      ]
    }
  },
  computed:{
    skuList(){
      return this.form.cartons || []
    }
  },
  async onLoad(options) {
    // 进入详情页时显示loading
    uni.showLoading({ title: '加载中...' })
    await this.onGetWmsList();

    const res = await api.inbound.getInboundList("findInboundByGuid", {
      data: {
        guid: options.id
      }
    })
    this.form = res.data.data;
    this.form.orderNo = res.data.data.order_no
    this.form.supplierName = '供应商' + options.id // TODO
    this.form.inboundTime = new Date().toISOString().slice(0, 10) // TODO

    uni.hideLoading()
  },
  methods: {
    async onGetWmsList() {
      const res = await api.wms.getWms("findWarehouse", {});
      this.warehouseList = res.data.data
    },
    onWarehouseConfirm(e) {
      const idx = e.indexs[0]
      this.form.warehouseId = this.warehouseList[idx].guid
      this.form.warehouseName = this.warehouseList[idx].warehouse_name
      this.showWarehousePicker = false
    },
    async onSubmit() {
      // 这里可提交入库信息到后端
      uni.showLoading({ title: '保存中...' })
      await api.inbound.getInboundList("orderInbound", {
        data: {
          row: this.form
        }
      })
      uni.hideLoading()
      uni.showToast({ title: '提交成功', icon: 'success' })
    },
    onGoScan() {
      // 跳转到扫码盘点页面
      uni.navigateTo({ url: `/pages/inbound/scan?order_guid=${this.form.guid}&wms_guid=${this.form.warehouseId}` })
    },
    onShelfClick(sku) {
      this.shelfSku = sku
      this.showShelfPicker = true
    },
    onShelfLocationConfirm(e) {
      const idx = e.indexs[0]
      const location = this.locationList[idx]
      this.showShelfPicker = false
      uni.showLoading({ title: '上架中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: `${this.shelfSku.name} 上架到 ${location.name} 成功`, icon: 'success' })
        this.shelfSku = null
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.custom-card {
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx 20rpx 10rpx 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 18rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 30rpx 40rpx 40rpx 40rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.sku-summary {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 18rpx;
}

.sku-table {
  background: #f8f9fa;
  border-radius: 10rpx;
  padding: 10rpx 0 0 0;
}

.sku-table-header,
.sku-table-row {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.sku-table-header {
  font-weight: bold;
  color: #2979ff;
  border-bottom: 1rpx solid #e9ecef;
}

.sku-col {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
}

.sku-name {
  flex: 2;
}

.sku-dim {
  flex: 2.5;
}

.sku-weight {
  flex: 1.2;
}

.sku-qty {
  flex: 1;
}

.sku-action {
  flex: 1.2;
  text-align: center;
}
</style>